说明
设置内嵌的元素在 3D 空间如何呈现。有两个值：flat：所有子元素在 2D 平面呈现。preserve-3d：保留3D空间。
取值
flat：所有子元素在 2D 平面呈现。
preserve-3d：保留3D空间。
实例代码
CSS
.demo_box{
background:none;width:700px;height:300px;border:none;
}
.perspective{
position:relative;width:200px;height:200px;float:left;margin:20px;
-webkit-transform:perspective(300px);
-moz-transform:perspective(300px);
}
.m3d{
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}
.perspective span{
display:block;position:absolute;width:198px;height:198px;font-size:120px;line-height:198px;text-align:center;
background:rgba(0,0,0,0.2);border:1px solid #333;
}
.front{
-webkit-transform:rotateY(0deg) translateZ(100px);
-moz-transform:rotateY(0deg) translateZ(100px);
}
.back{
-webkit-transform:rotateY(180deg) translateZ(100px);
-moz-transform:rotateY(180deg) translateZ(100px);
}
.right{
-webkit-transform:rotateY(90deg) translateZ(100px);
-moz-transform:rotateY(90deg) translateZ(100px);
}
.left{
-webkit-transform:rotateY(-90deg) translateZ(100px);
-moz-transform:rotateY(-90deg) translateZ(100px);
}
.top{
-webkit-transform:rotateX(90deg) translateZ(100px);
-moz-transform:rotateX(90deg) translateZ(100px);
}
.bottom{
-webkit-transform:rotateX(-90deg) translateZ(100px);
-moz-transform:rotateX(-90deg) translateZ(100px);
}
HTML
运行一下 »
<div class="demo_box"> <div class="perspective"> <span class="front">1</span> <span class="back">2</span> <span class="right">3</span> <span class="left">4</span> <span class="top">5</span> <span class="bottom">6</span> </div> <div class="perspective m3d"> <span class="front">1</span> <span class="back">2</span> <span class="right">3</span> <span class="left">4</span> <span class="top">5</span> <span class="bottom">6</span> </div> </div>
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |